<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% response.setHeader("cache-control", "public"); %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/iconfont.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css"/>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        /* li去点 */
        li {
            list-style: none;
        }

        /* 整体背景色 */
        body {
            background-color: rgb(222, 223, 225);
        }

        /* 头部div */
        .head {
            width: 100%;
            background-color: white;
            height: 60px;
            position: fixed;
            top: 0px;
            left: 0px;
            display: flex;
            z-index: 999;
        }

        /* 返回主页图标 */
        .backhead > img {
            margin-top: 5px;
            margin-left: 200px;
        }

        /* a链接字体颜色 */
        a {
            color: black;
        }

        /* 搜索框 */
        .search_box {
            display: grid;
            grid-template-columns: 5fr 1fr;
            align-items: center;
            margin-left: 40px;
            position: relative;
        }

        .headtext {
            height: 30px;
        }

        .headbut {
            width: 80px;
            height: 34px;
            border: 1px solid black;
            border-left: none;
            background-color: rgba(67, 183, 231);
            font-size: 20px;
            color: aliceblue;

        }

        .headbut:hover {
            background-color: rgb(15, 157, 219);
        }

        .icon-sousuo {
            font-size: 20px;
            background-color: transparent;
        }

        .scrchContent {
            width: 476px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 47px;
            display: none;
            border: 2px solid black;
            border-top: none;
            z-index: 999;

        }

        .headtext:focus ~ .scrchContent {
            display: block;

        }

        .scrchContent > li > a {
            text-decoration: none;
            margin-left: 10px;

        }

        .scrchContent > li {
            line-height: 40px;

        }

        .scrchContent > li:hover {
            line-height: 40px;
            background-color: rgb(229, 227, 227);
        }

        /* 头部右边列表 */
        .head_ul2 {
            position: absolute;
            right: 60px;
        }

        .head_ul2 > li {
            float: left;
            line-height: 60px;
            margin-left: 30px;
            font-size: 20px;
        }

        /* 消息下拉动画 */
        .head_downbox {
            width: 60px;
            margin: auto;
        }

        .head_downcenter {
            position: absolute;
            top: 60px;
            right: 160px;
            width: 100px;
            height: 180px;
            border: 1px solid black;
            border-radius: 3px;
            background-color: white;
            display: none;
            z-index: 999;

        }


        .head_downcenter_ul {
            font-size: 15px;
            line-height: 26px;
        }

        .head_downcenter_ul > li > a {
            text-decoration: none;

        }

        .head_downcenter_ul > li:hover {
            background-color: rgb(229, 227, 227);


        }


        .head_downbox:hover ~ div {
            display: block;
        }

        .head_downcenter:hover {
            display: block;
        }

        /* 分类 */

        /* 分类div */
        .classify {
            width: 95.5%;
            height: 72px;
            background-color: white;
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
            transition: 0.5s;
            border-radius: 5px;
        }

        .classify:hover {
            height: 240px;
        }

        .classify_ul {
            display: flex;
            flex-wrap: wrap;
            line-height: 80px;
            position: absolute;

        }

        .classify_ul > li {
            width: 142px;
            text-align: center;
            font-size: 18px;
        }

        .classify_ul > li:hover {
            background-color: #cccc;
        }

        .classify_ul > li > a {
            position: relative;

            color: #000;

            text-decoration: none;
        }
        .classify_ul > li > a:hover{
            color: #000;
        }
        .classify_ul > li > a:before {

            content: "";

            position: absolute;

            width: 100%;

            height: 2px;

            bottom: 0;

            left: 0;

            background-color: #000;

            visibility: hidden;

            -webkit-transform: scaleX(0);

            -o-transform: scaleX(0);

            transform: scaleX(0);

            -webkit-transition: all 0.3s ease-in-out 0s;

            -o-transition: all 0.3s ease-in-out 0s;

            transition: all 0.3s ease-in-out 0s;
        }
        .classify_ul > li > a:hover:before {

            visibility: visible;

            -webkit-transform: scaleX(1);

            -o-transform: scaleX(1);

            transform: scaleX(1);

        }

        .classify_icon {
            width: 38px;
            height: 20px;
            background-color: lightgray;
            position: absolute;
            top: 55px;
            left: 50%;
            text-align: center;
            border-radius: 10px 10px 0px 0px;
            transition: 0.5s;
        }

        .classify:hover > div {
            top: 220px;
            transform: rotate(180deg);
            border-radius: 0px 0px 10px 10px;
        }

        /* 广告 */
        .advertising {
            width: 95%;
            height: 140px;
            margin: 0 auto;
            background-color: rgb(113, 194, 229);
            margin-top: 160px;
            font-size: 40px;
            text-align: center;
            border-radius: 3px;
        }

        /* 热议吧 */
        .bodybox {
            width: 95%;
            height: 430px;
            background-color: white;
            margin: auto;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: 3fr 1fr;
        }

        /* 热议吧左边 */
        .bodybox-left {
            overflow: hidden;
        }

        .bodybox-left-top {
            height: 40px;
            line-height: 40px;
            display: flex;
            border-bottom: solid 1px #cccc;
            padding-bottom: 10px;
            align-items: center;
        }

        .bodybox-left-top div {
            margin-left: 800px;
            font-size: 18px;
        }

        .bodybox-left-top > span:nth-child(odd) {
            font-size: 30px;
            color: rgb(33, 158, 211);
        }

        .bodybox-left-top > span:nth-child(even) {
            font-weight: bold;
            font-size: 20px;
        }

        .bodybox-left > ul > li {
            float: left;
        }

        .body-left-img {
            width: 195px;
            height: 120px;
            display: flex;
            align-items: center;
        }

        .body-left-img div:nth-child(even) li {
            line-height: 25px;

        }

        .tiaozhuan {
            text-decoration: none;
        }

        .body-left-img div {
            height: 80px;
            padding-left: 15px;
        }

        .body-left-img > div > img {
            border-radius: 10px;
            width: 80px;
            height: 80px;
            margin-top: 30px auto;
            border-radius: 5px;
        }

        /* 热议吧右边 */
        .bodybox-right img {
            width: 330px;
            height: 430px;
            border-radius: 5px;
        }

        /* 下部分 */
        .bottom {
            width: 95%;
            background-color: white;
            margin: auto;
            margin-top: 15px;
            display: grid;
            grid-template-columns: 3.5fr 1fr;
            border-radius: 5px;
        }

        /*  热门动态*/
        .bottom-hot {
            border-right: 1px solid #cccc;
        }

        .bottom-hot a {
            position: relative;
            color: #000;
            text-decoration: none;
        }

        .bottom-hot a:hover {
            color: #000;
        }
        .bottom-hot a:before {

            content: "";

            position: absolute;

            width: 100%;

            height: 1.5px;

            bottom: 0;

            left: 0;

            background-color: lightslategray;

            visibility: hidden;

            -webkit-transform: scaleX(0);

            -o-transform: scaleX(0);

            transform: scaleX(0);

            -webkit-transition: all 0.3s ease-in-out 0s;

            -o-transition: all 0.3s ease-in-out 0s;

            transition: all 0.3s ease-in-out 0s;

        }
        .bottom-hot a:hover:before {

            visibility: visible;

            -webkit-transform: scaleX(1);

            -o-transform: scaleX(1);

            transform: scaleX(1);

        }


        .bottom-hot-top {
            width: 95%;
            height: 50px;
            border-bottom: 1px solid #cccc;
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
        }

        .bottom-hot-top > span {
            margin-left: 50px;
            color: rgb(56, 149, 189);
            text-decoration: underline;
        }

        .bottom-hotcontent-top p:nth-child(odd) {
            font-size: 20px;
            font-weight: bolder;
            margin-left: 25px;
        }

        .bottom-hotcontent-top p:nth-child(even) {
            font-size: 17px;
            font-weight: bold;
            margin-left: 30px;
            color: rgba(67, 183, 231);
        }

        .bottom-hotcontent {
            width: 95%;
            height: 170px;
            border-bottom: 1px solid #cccc;
            margin-top: 5px;
        }

        .bottom-hotcontent:hover {
            background-color: rgba(239, 237, 237, 0.8);

        }

        .bottom-hotcontent-bottom {
            display: flex;
            margin-top: 5px;
            position: relative;
        }

        .bottom-hotcontent-bottom > img {
            width: 120px;
            height: 100px;
            margin-left: 20px;
            border-radius: 5px;

        }

        .bottom-hotcontent-bottom > p {
            margin-left: 15px;
            font-size: 15px;

        }

        .bottom-hotcontent-bottom div {
            position: absolute;
            width: 500px;
            height: 30px;
            top: 75px;
            left: 170px;
        }

        .bottom-hotcontent-bottom p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .bottom-hotcontent-bottom span:nth-child(odd) {
            font-size: 20px;
            color: rgb(122, 119, 119);
            margin-left: 10px;
        }

        .bottom-hotcontent-bottom span:nth-child(even) {
            font-size: 12px;
        }

        /* 热议吧 */
        .bottom-discussion {
            position: relative;
        }

        .bottom-discussion-content {
            width: 100%;
            height: 400px;
            position: sticky;
            top: 60px;
            border-bottom: 1px solid #cccc;
        }

        .bottom-discussion-content > div {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #cccc;
        }

        .bottom-discussion-content > div > span {
            font-size: 20px;
            font-weight: bold;
            line-height: 50px;
            margin-left: 20px;
            color: rgb(56, 149, 189);
        }

        .bottom-discussion-content > ul {

            line-height: 34px;
        }

        .bottom-discussion-content > ul > li {
            text-indent: 1em;
            transition: 0.5s;
        }

        .bottom-discussion-content > ul > li > a {
            text-decoration: none;
        }


        .bottom-discussion-content > ul > li:hover {
            background-color: rgb(217, 216, 216);
            transform: scale(1.05);
        }
    </style>

    <script>

    </script>
</head>

<body>
<div class="head">
    <a href="${pageContext.request.contextPath}" class="backhead"><img
            src="${pageContext.request.contextPath}/images/logo1.jpg" width="110px"
            height="50px"
            id="headlogo"></a>

    <div class="search_box">
        <input type="text" class="headtext" maxlength="25">
        <button type="submit" class="headbut"><span class="iconfont icon-sousuo"></span>
            搜索
        </button>
        <div class="scrchContent">
            <li><a href="">网页123123</a></li>
            <li><a href="">资讯123123123</a></li>
            <li><a href="">视频123123123</a></li>
            <li><a href="">图片123123123</a></li>
            <li><a href="">知道23123</a></li>
        </div>

    </div>

    <ul class="head_ul2">
        <c:choose>
            <c:when test="${user.userName==null}">
                <li><a href="${pageContext.request.contextPath}/login">登录/注册 </a></li>
            </c:when>
            <c:otherwise>
                <li><a href="${pageContext.request.contextPath}/mydata">${user.petName}</a></li>
                <li>
                    <div class="head_downbox">
                        <p align="center">消息<span class="iconfont icon-xiala"></span></p>
                    </div>
                    <div class="head_downcenter">
                        <ul class="head_downcenter_ul">
                            <li><a href="">查看私信 </a></li>
                            <li><a href="">回复私信</a></li>
                            <li><a href="">查看@提到我</a></li>
                            <li><a href="">查看好友申请</a></li>
                            <li><a href="">查看新粉丝</a></li>
                            <li><a href="">我的收藏</a></li>
                            <li><a href="">我的通知</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="">问题反馈</a></li>
                <li><a href="${pageContext.request.contextPath}/logout">注销</a></li>
            </c:otherwise>
        </c:choose>
    </ul>
</div>
<!-- 分类 -->
<div class="classify">
    <ul class="classify_ul">
        <c:forEach items="${applicationScope.onetypename}" var="onetypename" varStatus="status"
                   begin="0" end="4" step="1">
            <li><a href="${pageContext.request.contextPath}/">${onetypename}</a></li>
        </c:forEach>
        <li><a href="${pageContext.request.contextPath}/classify">全部分类</a></li>
    </ul>
    <div class="classify_icon">
        <span class="iconfont icon-xiangxiafanye"></span>
    </div>
</div>
<div class="advertising">
    广告招租 详情联系微信：lu2044913306
</div>
<div class="bodybox">
    <div class="bodybox-left">
        <div class="bodybox-left-top">
            <span class="iconfont icon-dengpao"> </span><span>热门吧</span>
            <div><span class="iconfont icon-fanye1"></span>1/18<span class="iconfont icon-fanye"></span>
            </div>
        </div>
        <ul>
            <li>
                <a class="tiaozhuan" href="">
                    <div class="body-left-img">
                        <div><img src="/img/a.jpg"></div>
                        <div>
                            <ul>
                                <li>啊啊啊啊</li>
                                <li><span class="iconfont icon-user">111w</span></li>
                                <li><span class="iconfont icon-rili">222w</span></li>
                            </ul>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="bodybox-right">
        <div class="swiper" style="width: 330px;height: 430px;">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#"><img src="/img/2.jpg"></a></div>
                <div class="swiper-slide"><a href="#"><img src="/img/1.jpg"></a></div>
                <div class="swiper-slide"><a href="#"><img src="/img/3.jpg"></a></div>
            </div>
            <div class="swiper-pagination"></div>
            <!-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
        </div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: {
            delay: 2000
        },
        speed: 300,
        slidesPerView: 1, //显示几个
        // 如果需要分页器
        pagination: {
            el: ".swiper-pagination",
            // 点击小球的时候也切换图片
            clickable: true,
        },

        // 如果需要前进后退按钮
        // navigation: {
        // nextEl: ".swiper-button-next",
        // prevEl: ".swiper-button-prev",
        // },
    })
</script>
<!-- 下部分 -->
<div class="bottom">
    <!-- 热门动态 -->
    <div class="bottom-hot">
        <div class="bottom-hot-top">
            <span>热门动态</span>
            <c:if test="${user.userId!=null}">
                <span>个性动态</span>
            </c:if>
        </div>

        <c:forEach items="${applicationScope.hotposts}" var="hotpost">
            <div class="bottom-hotcontent">
                <div class="bottom-hotcontent-top">

                    <p><a href="#" style="font-weight: initial;font-size: revert">${hotpost.topics.topicName}</a></p>


                    <p style="font-weight: inherit"><a href="#"
                                                       style="color: royalblue">【${hotpost.types.typeName}】${hotpost.postTitle}</a>
                    </p>

                </div>
                <div class="bottom-hotcontent-bottom">

                    <p style="color: lightslategray">${hotpost.postValue}</p>
                    <div>
                        <span class="iconfont icon-user"></span><span> <a href="#">${hotpost.users.userName}</a></span>
                        &nbsp;&nbsp;&nbsp;<span class="iconfont icon-pinglun"></span><span
                            style="font-size: small">${hotpost.postReplys}</span>
                        &nbsp;&nbsp;&nbsp;<span class="iconfont icon-bofangjilu"></span> <span
                            style="font-size: small">${hotpost.postDate}</span>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
    <!-- 热议吧 -->
    <div class="bottom-discussion">
        <div class="bottom-discussion-content">
            <div>
                <span>轻语热议榜</span>
            </div>
            <ul>
                <li><a href="#">wqeqweqwe</a></li>
                <li><a href="#">qweqweqweqwe</a></li>
                <li><a href="#">qweqweqwe</a></li>
                <li><a href="#">qweqweqweq</a></li>
                <li><a href="#">eqwe</a></li>
                <li><a href="#">qweqweqweqweqwe</a></li>
                <li><a href="#">qweqweqweqweqwe</a></li>
                <li><a href="#">qweqweqweqweqwe</a></li>
                <li><a href="#">qweqweqweqweqwe</a></li>
                <li><a href="#">qweqweqweqweqwe</a></li>
            </ul>

        </div>

    </div>

</div>
</body>

</html>
